<template>
    <div id="payment">
        <div class="row">
            <div class="col-md-12">
                <condition :data="condition" @getCondition="getCondition"></condition>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <el-table :data="audits" size="small" border style="width: 100%">
                    <el-table-column fixed sortable align="center" prop="TradeId" label="TradeId" width="100"></el-table-column>
                    <el-table-column fixed align="center" prop="PayNo" label="PayNo" width="250"></el-table-column>
                    <el-table-column align="center" prop="TradeType" label="Type" width="250"></el-table-column>
                    <el-table-column align="center" prop="TradeInfo" label="Info" width="250"></el-table-column>     
                    <el-table-column align="center" label="CreateTime" width="250">
                        <template slot-scope="scope">
                            <span>{{scope.row.CreateTime|Localtime}}</span>
                        </template>                         
                    </el-table-column>
                    <el-table-column fixed="right" align="center" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="tradeDetail=scope.row.TradeDetail; dialogVisible=true;">详细信息</el-button>
                            <el-button size="mini" type="primary" @click="query({ RandStr: scope.row.Field1 })">相关记录</el-button>
                        </template>
                    </el-table-column>                      
                </el-table>
                <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="pageCount"></el-pagination>
            </div>
        </div>
        <div>
            <el-dialog title="详细信息" width="75%" :visible.sync="dialogVisible">
                <div>
                    <pre style="max-height: 600px;">{{messageFormat(tradeDetail)}}</pre>
                </div>
            </el-dialog>  
        </div>
    </div>
</template>

<script>

import {LocaltimeFormat, DAYS, FormatXml} from 'web/utils.js';
import Condition from './condition.vue';

export default {
    data() {
        return {
            audits: [],
            pageCount: 0,
            pageSize: 10,            
            condition: null,
            tradeDetail: null,
            dialogVisible: false
        }
    },
    components: {
        Condition
    },
    filters: {
        Localtime: LocaltimeFormat
    },
    mounted() {
        // 初始加载日志数据
        this.condition = {
            AuditTime0: DAYS.Today,
            AuditTime1: DAYS.Tomorrow,
            PayMethods: [],
            LogTypes: []
        };
        this.query(this.condition, 1, this.pageSize);
    },
    methods: {

        // 字符串格式化
        // {}标识为json字符串，<>标识为xml字符串，否则标识为一般字符串不格式化
        messageFormat: function(msg) {
            if (msg == null) return "";
            
            // 去除前后的引号
            if (msg.startsWith('"')) msg = msg.substr(1);
            if (msg.endsWith('"')) msg = msg.substr(0, msg.length-1);

            // JSON格式化            
            if (msg.startsWith('{') && msg.endsWith('}')) {
                let obj = JSON.parse(msg)
                msg = JSON.stringify(obj, null, 3);
            }

            // XML格式化
            if (msg.startsWith('<') && msg.endsWith('>')) {
                msg = FormatXml(msg);
            }

            return msg;
        },

        // 处理页面索引变化消息
        handleCurrentChange(val) {
            this.$TradeAuditService.QueryTradeAudits(this.condition, val, this.pageSize)
                .then(ret => {
                    this.audits = ret;
                });            
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.$TradeAuditService.QueryTradeAudits(this.condition, 1, this.pageSize)
                .then(ret => {
                    this.audits = ret;
                }); 
        },

        // 获取查询条件并进行查询
        getCondition(condition) {
            this.condition = condition;
            this.query(this.condition);
        },

        // 条件查询
        query(condition) {
            Promise.all([
                this.$TradeAuditService.QueryTradeAuditsCount(condition),
                this.$TradeAuditService.QueryTradeAudits(condition, 1, this.pageSize)
            ]).then(ret => {
                this.pageCount = ret[0];
                this.audits = ret[1];
            });
        },        
    }
}
</script>

<style>

</style>
